<html>
<head>
    <title>HTTP-Flv Player</title>
</head>
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdn.bootcss.com/flv.js/1.5.0/flv.min.js" type="text/javascript"></script>
<body style="background-color: #666666">
<center>
<input id="tag">&nbsp;&nbsp;<button onclick="playVideo()">Play Video</button>&nbsp;&nbsp;<button onclick="stopVideo()">STOP Video</button>
<br>
<div id="xxoo" style="background-color: #333333;border-radius: 10px; overflow: hidden; width: 1024px; height: 600px;"></div>
</center>
<script type="text/javascript">
/**
 * 创建一个FLV播放器，参数如下：
 * {
 *      container : 视频容器元素
 *      muted     : 是否静音
 *      url       : HTTP-FLV地址
 * }
 */
function FLVPlayer(opts)
{
    var videoElement = document.createElement('VIDEO');
    videoElement.autoplay = true;
    videoElement.controls = true;
    videoElement.muted = false;
    videoElement.style.width = '100%';
    videoElement.style.height = '100%';
    opts.container.append(videoElement);

    this.container = opts.container;
    this.videoElement = videoElement;
    this.httpFlvURL = opts.url;

    this.mediaInfo = null;
    this.play = null;
    this.onPlayEvtListener = null;
    this.onPauseEvtListener = null;
    this.onStopEvtListener = null;

    this.autoFastForward = opts.autoFastForward;
	if(this.httpFlvURL.indexOf('playback')>0){
		this.autoFastForward=false;
	}
    this.autoFastForwardInterval = null;

    this.play = function()
    {
        if (this.player) return;

        var self = this;

		self.player = new flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                url: self.httpFlvURL,
                cors: true
            }, {
                enableStashBuffer: false,
                autoCleanupSourceBuffer: true,
                autoCleanupMaxBackwardDuration: 30,
                autoCleanupMinBackwardDuration: 10
            });

        self.player.on('media_info', function()
        {
            self.mediaInfo = self.player.mediaInfo;
        });

        self.player.on('statistics_info', function()
        {
            //console.log(arguments);
        });

		self.player.on(flvjs.Events.ERROR, function (type, detail) { // 错误
                console.log('播放错误，错误类型:' + type);
                    self.player.pause();
                    self.player.unload();
                    setTimeout(function () {
                        self.player.load();
                        self.player.play().catch(function (e) {
                            console.log(e);
                        });
                    }, 500);
                
            });

        var autoPlayTimer = null;
        self.videoElement.addEventListener('player', function(e)
        {
            if (autoPlayTimer) clearInterval(autoPlayTimer);
            if (self.onPlayEvtListener) self.onPlayEvtListener(self, e);
        });
        self.videoElement.addEventListener('dblclick', function()
        {
            if (self.videoElement.requestFullscreen) self.videoElement.requestFullscreen();
        });
        autoPlayTimer = setInterval(function()
        {
            try { self.player.play(); } catch(e) { clearInterval(autoPlayTimer); };
        });

        self.player.attachMediaElement(self.videoElement);
        self.player.load();
        self.player.play().catch(function (e) {
                console.log(e);
            });

        if (this.autoFastForward) this.autoFastForwardInterval = setInterval(function(){
            if (self.videoElement.buffered.length > 0 && self.videoElement.buffered.end(0) - self.videoElement.currentTime > 2)
            {
                console.log(self.videoElement.buffered.end(0) + "-" + self.videoElement.currentTime);
                self.videoElement.currentTime = self.videoElement.buffered.end(0) - 1;
            }
        }, 1000);
    };

    this.fullscreen = function(){
        if (this.videoElement && this.videoElement.requestFullscreen)
            this.videoElement.requestFullscreen();
    };

    this.onPlay = function(fn){
        this.onPlayEvtListener = fn;
    };

    this.destroy = function(){
        //this.player.destroy();
			this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
        clearInterval(this.autoFastForwardInterval);
    }
}
</script>
<script type="text/javascript">
	var videoPlayer;
    if (location.hash){
        var hash = location.hash.substring(1);
        $('#tag').val(hash);
    }
    function playVideo(){
        videoPlayer = new FLVPlayer({
            container : $('#xxoo'),
            //url : '/live?port=19350&app=live&stream=' + $('#tag').val(),
			url : '/video/' + $('#tag').val(),
            // 自动快进追祯，但是可能会导致画面停顿
            autoFastForward : false
        });
        videoPlayer.play();
    }
	function stopVideo(){
		videoPlayer.destroy();
		$('#xxoo').html('');
	}
	playVideo();
</script>
</body>
</html>
